html, body { /*高度 100%，清除内外边距，https://www.joshwcomeau.com/css/custom-css-reset*/
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

body, .container { /*https://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html*/
  display: grid;
  grid-template: auto auto 1fr 24px / minmax(125px, 8%) 1fr;
}

body > head, body > footer { /*直接子元素*/
  grid-column: 1 / 3;
}

body > aside {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
}

body > nav {
  grid-column: 2 / 3;
  grid-row: 2 / 3;

}

body > main {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

aside a.active { /*所有子元素*/
  color: blue;
  font-weight: bold;
}

aside ul {
  list-style: none;
  padding-left: 1em;
  cursor: pointer;
}

body > main > div {
  display: none;
}

footer {
  text-align: center
}

body > dialog {
  max-width: 90vw;
  max-height: 90vh;
}